<!--营销管理-->
<template>
  <div class="page-container main">
    <div class="tool-container">
      <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item>
          <el-select v-model="queryParams.activityType" placeholder="活动类型">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input type="input" placeholder="活动名称" v-model="queryParams.activityName" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryParams.status" placeholder="状态">
            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tool-handle">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增活动</el-button>
      </div>
    </div>

    <div class="tabel-container myTable" v-loading="loading">
      <vxe-table ref="tableRef" :data="tableData" height="auto" >
        <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable></vxe-table-column>
        <vxe-table-column :resizable="true" field="activityId" title="活动ID" width="180" sortable></vxe-table-column>
        <vxe-table-column :resizable="true" field="activityType" title="活动类型" width="90" sortable>
          <template #default="{ row }">
            <span v-if="row.activityType==1">优惠券</span>
            <span v-else-if="row.activityType==2">积分</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="couponType" title="优惠券类型" width="110" sortable>
          <template #default="{ row }">
            <span v-if="row.activityCouponVo?.couponType==1">现金</span>
            <span v-else-if="row.activityCouponVo?.couponType==2">满减</span>
            <span v-else-if="row.activityCouponVo?.couponType==3">体验</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="activityName" title="活动名称" width="200" sortable></vxe-table-column>
        <vxe-table-column :resizable="true" field="scope" title="可用对象" width="90" sortable>
          <template #default="{ row }">
            {{ marchType(row.scope, scope) }}
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="orderType" title="可用范围" width="90" sortable>
          <template #default="{ row }">
            {{ marchType(row.orderType, orderType) }}
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="distributionRatio" title="发放比例" width="90" sortable>
          <template #default="{ row }">
            <span v-if="row.activityCouponVo!=null">{{ row.activityCouponVo.distributionRatio }}%</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="startTime" title="活动时间起止" width="300" sortable>
          <template #default="{ row }">{{ row.startTime }}-{{ row.endTime }}</template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="qrCode" title="活动链接" width="200" sortable>
          <template #default="{ row }">
            <span v-if="row.activityType==1&&row.qrCode!=null">{{ row.qrCode }}</span>
            <span v-else-if="row.activityType==1">暂无</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="status" title="状态" width="90" sortable>
          <template #default="{ row }">
            <el-tag v-if="row.status == 3" type="info">已结束</el-tag>
            <el-tag v-else-if="row.status == 1" type="warning">未开始</el-tag>
            <el-tag v-else-if="row.status == 2" type="primary">进行中</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="participantsQuantity" title="参与人次" width="90" sortable>
          <template #default="{ row }">
            <span v-if="row.activityCouponVo!=null">{{ row.activityCouponVo.participantsQuantity }}</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="verifiedQuantity" title="核销人次" width="90" sortable>
          <template #default="{ row }">
            <span v-if="row.activityCouponVo!=null">{{ row.activityCouponVo.participantsQuantity }}</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="orderAmount" width="140" title="关联订单金额(元)" sortable>
          <template #default="{ row }">
            <span v-if="row.activityType==1">{{ row.orderAmount }}</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="totalQuantity" title="总张数" width="90" sortable>
          <template #default="{ row }">
            <span v-if="row.activityCouponVo!=null">{{ row.activityCouponVo.totalQuantity }}</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="collectedQuantity" title="领取张数" width="90" sortable>
          <template #default="{ row }">
            <span v-if="row.activityCouponVo!=null">{{ row.activityCouponVo.collectedQuantity }}</span>
            <span v-else>-</span>
          </template>
        </vxe-table-column>

        <vxe-column field="id" title="操作" width="260" fixed="right" show-overflow>
          <template #default="{ row }">
            <el-button link type="primary" @click="handleDetail(row)">详情</el-button>
            <el-button link v-if="row.status == 1" type="primary" @click="handleUpdate(row)">编辑</el-button>
            <el-button link v-else type="info" disabled>编辑</el-button>

            <el-button v-if="row.status == 1" link type="primary" @click="handleStart(row)">开始</el-button>
            <el-button v-else-if="row.status==3" link type="info" disabled>开始</el-button>
            <el-button v-else link type="danger" @click="handleEnd(row)">结束</el-button>

            <el-button v-if="row.status == 2" link type="danger" @click="handleStop(row)">中止</el-button>
            <el-button v-else-if="row.status==3" link type="info" disabled>删除</el-button>
            <el-button v-else link type="danger" @click="handleDelete(row)">删除</el-button>

            <el-button v-if="row.status==3 || row.activityType==2" link type="info" disabled>定向发送</el-button>
            <el-button v-else link type="primary" @click="handleSend(row)">定向发送</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <div class="myPager">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <el-drawer :title="dom.rightComponent.title" v-model="dom.rightComponent.show" direction="rtl" class="demo-drawer" :close-on-click-modal="false">
      <component
        ref="rightComponent"
        :is="dom.rightComponent.companentName"
        :data="currentItem"
        @hideRight="dom.rightComponent.show = false;getList();"
      ></component>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { listActivity, getActivity, startActivity, stopActivity, delActivity } from '@/api/operation/activity/index';
import common from '@/utils/common.ts';

export default {
  components: {
    Edit: defineAsyncComponent(() => import('./edit/index.vue')),
    Send: defineAsyncComponent(() => import('./send/send.vue'))
  },
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        status: null,
        activityType: null,
        activityName: '',
        pageNum: 1,
        pageSize: 20
      },
      tableData: [],
      status: [
        { label: '未开始', value: 1 },
        { label: '进行中', value: 2 },
        { label: '已结束', value: 3 }
      ],
      type: [
        { label: '优惠', value: '1' },
        { label: '积分', value: '2' }
        // {label: '满减', value: '2'},
        // {label: '体验', value: '3'}
      ],
      scope: [
        { label: '全局', value: 1 },
        { label: '区域', value: 3 },
        { label: '酒店', value: 2 }
      ],
      orderType: [
        { label: '全局', value: '1' },
        { label: '吸氧', value: '2' },
        { label: '充灌', value: '3' }
      ],
      currentItem: {},
      dom: {
        proxy: null,
        rightComponent: {
          show: false,
          title: '测试',
          companentName: 'Edit'
        }
      }
    };
  },
  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.dom.proxy = proxy;
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },

    //查询列表
    getList() {
      this.loading = true;
      listActivity(this.queryParams).then((res) => {
        this.loading = false;
        this.tableData = res.rows;
        this.total = res.total;
      });
    },

    //查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //新增
    handleAdd() {
      this.dom.rightComponent.show = true;
      this.currentItem = JSON.parse(JSON.stringify(common.operActivity.defaultActivity));
      this.dom.rightComponent.title = '新增活动';
      this.$nextTick(() => {
        this.$refs.rightComponent.init();
      });
    },
    //更新
    handleUpdate(row) {
      this.dom.rightComponent.show = true;
      this.currentItem = row;
      this.dom.rightComponent.title = '编辑活动';
      this.dom.rightComponent.companentName = 'Edit';
      this.$nextTick(() => {
        if (this.$refs.rightComponent) this.$refs.rightComponent.init();
      });
    },

    //开始
    handleStart(row) {
      let id = row.activityId;
      this.loading = true;
      startActivity(id)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.getList();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //结束
    handleEnd(row) {
      this.loading = true;
      let id = row.activityId;
      stopActivity(id)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.getList();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //终止
    handleStop(row) {
      this.handleEnd(row);
    },

    //详情
    handleDetail(row) {
      this.dom.proxy?.$tab.openPage('/operation/operActivity/info', '活动详情', { id: row.activityId });
    },

    //定向投放
    handleSend(row) {
      this.dom.rightComponent.show = true;
      this.currentItem = row;
      this.dom.rightComponent.title = '定向投放';
      this.dom.rightComponent.companentName = 'Send';
      this.$nextTick(() => {
        if (this.$refs.rightComponent) this.$refs.rightComponent.init();
      });
    },

    //获取活动详细信息
    get(id, callback) {
      getActivity(id).then((res) => {
        let data = res.data;
        callback(data);
      });
    },

    //删除
    handleDelete(row) {
      let ids = [row.activityId];

      ElMessageBox.confirm('是否确认要删除该活动?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true;
          delActivity(ids)
            .then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.getList();
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },

    /**
     * 匹配结果
     */
    marchType(value, types) {
      for (let i = 0; i < types.length; i++) {
        let type = types[i];
        if (type.value == value) return type.label;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;

  .myTable {
    width: 100%;
    height: calc(100% - 60px);
    overflow: auto;
  }

  .myPager {
    width: 100%;
    height: 50px;
    text-align: right;
  }
}
</style>

<style>
.el-drawer__header {
  margin-bottom: 5px !important;
  border-bottom: 1px solid var(--el-card-border-color, #e4e7ed);
  padding-bottom: 20px;
}

.el-drawer__body {
  padding: 10px !important;
}

.el-input-number__decrease,
.el-input-number__increase {
  display: none;
}

.el-input-number {
  width: 100%;
}

.el-select {
  min-width: 150px;
}

.vxe-table--main-wrapper{
  height:100%;
}
</style>
